<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${title!''}</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
<style type="text/css">
.wraaper {
	display: block;
	display: inline;	
	border-radius: 20px; 
	font-family: Mircosoft Yahei;
	
}
.wraaper .canvas {
	display: block; 
	float: left; 	
	width: 500px;
	margin: 5px;	
}
body{
	background-color: #666;
}
</style>
<script src="${ctx}/res/js/jquery-easyui/jquery.min.js"></script>
<script src="${ctx}/res/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
<!-- <script src="${ctx}/res/highcharts/modules/exporting.js"></script> -->
<script type="text/javascript">
var station;//车站列表

function getKeySchedule(staion_name) {
		// 获取数据并初始化图表
		var vxset = [], vyset = [], vstr=[],vpie = [];
		$.getJSON('${ctx}/board/getKeySchedule?station_name=' + staion_name,
				function(data) {
					$.each(data, function(i, item) {
						vxset.push(item.text);
						vyset.push(item.progress * 100);
						vstr+="['"+item.text+"',"+item.progress * 100+"],";
						
					});	
					vpie=eval("["+vstr+"]");					
					$('#canvas1').highcharts({
						title : {
							text : staion_name+'-站点关键任务进度'
						},
						colors: ['#f66930', '#ecb939', '#48abee', '#f58d48', '#3dbd5b', '#81e0d6', '#80edbb'],
						xAxis : {
							categories : vxset,
							gridLineWidth : 1,
						/* labels: {
						    align: 'left',
						    x: 3,
						    y: -3
						}, */
						// 时间格式化字符
						// 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
						/*   dateTimeLabelFormats: {
						      week: '%Y-%m-%d'
						  } */
						},
						yAxis: [{ // Primary yAxis
					        	labels: {
					                 format: '{value}%'					                 
					            },
					        	title: {
					                text: '进度百分比'					                
					            }
					    }],
						series : [ {
							name : '形象进度',
							type : 'bar',
							data : vyset,
							tooltip : {
								valueSuffix : '%'
							}
						} ],
						credits : {
							enabled : false
						}
					});
					
					$('#canvas2').highcharts({
						title : {
							text : staion_name+'-站点关键任务进度'
						},
						colors: ['#f66930', '#ecb939', '#48abee', '#f58d48', '#3dbd5b', '#81e0d6', '#80edbb'],
						xAxis : {
							categories : vxset,
							gridLineWidth : 1,
						/* labels: {
						    align: 'left',
						    x: 3,
						    y: -3
						}, */
						// 时间格式化字符
						// 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
						/*   dateTimeLabelFormats: {
						      week: '%Y-%m-%d'
						  } */
						},
						yAxis: [{ // Primary yAxis
					        	labels: {
					                 format: '{value}%'					                 
					            },
					        	title: {
					                text: '进度百分比'					                
					            }
					    }],
						series : [ {
							name : '形象进度',
							type : 'pie',
							data : vpie,
							tooltip : {
								valueSuffix : '%'
							}
						} ],
						credits : {
							enabled : false
						}
					});
				});
	};
	
	$(document).ready(function() {
		var xset = [];//X轴数据集 
		var yset = [];//Y轴数据集
		$.getJSON('${ctx}/board/getStationProgress', function(data) {
			$.each(data, function(i, item) {
				xset.push(item.text);
				yset.push(item.progress * 100);
			});
			station=xset;
			var chart=$('#canvas').highcharts({
				title : {
					text : '环线站点总体进度'
				},
				colors: ['#f66930', '#ecb939', '#48abee', '#f58d48', '#3dbd5b', '#81e0d6', '#80edbb'],
				xAxis : [ {
					categories : xset,
					gridLineWidth : 1
				} ],
				yAxis: [{ // Primary yAxis
		        	labels: {
		                 format: '{value}%'					                 
		            },
		        	title: {
		                text: '进度百分比'					                
		            }
		    	}],
				series : [ {
					name : '形象进度',
					type : 'column',
					data : yset,
					tooltip : {
						valueSuffix : '%'
					}
				} ],
				credits : {
					enabled : false
				},
				plotOptions : {
					series : {
						cursor : 'pointer',
						allowPointSelect: true,
						point : {
							events : {
								// 数据点点击事件
								// 其中 e 变量为事件对象，this 为当前数据点对象
								click : function(e) {
									getKeySchedule(e.point.category);									
								}
							}
						},
						marker : {
							lineWidth : 1
						}
					}
				}
			});
			var index=Math.floor((Math.random()*station.length)); 
			getKeySchedule(station[index]);
		});
	});	

setInterval(() => {
	var index=Math.floor((Math.random()*station.length)); 
	getKeySchedule(station[index]);
},100000);
</script>

</head>
<body>
	<h1 align="center" style="color: white">环线一期站后工程进度计划管理看板</h1>	
	<div class="wraaper">
		<div id="canvas" class="canvas"></div>
		<div id="canvas1" class="canvas"></div>
		<div id="canvas2" class="canvas"></div>
	</div>
</body>
</html>
